<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-26 11:01
  PageName：e_practice5_DynamicStyle.html
  Function：实战案例 - 超链接的动态样式（定义运动动态样式）
  URL：http://localhost:8080/g_hyperlink/g3_practice/e_practice5_DynamicStyle.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 超链接的动态样式（定义运动动态样式）</title>

    <style type="text/css">
        body, h1 {
            margin: 0;
            padding: 0;
        }

        /* 模拟标题行样式 */
        #header {
            height: 80px;             /* 固定高度 */
            background: #0000FF;      /* 背景色 */
            color: #fff;              /* 字体颜色 */
            line-height: 80px;        /* 行高，定义垂直居中特效 */
            padding-left: 1em;        /* 左补白，避免标题贴边显示 */
        }

        /* 鼠标经过时样式 */
        a {
            text-decoration: none;    /* 清除下划线效果 */
            float: right;             /* 向右浮动 */
            margin-right: 4px;        /* 右边界，避免超链接贴边 */
            background: #0FFFF0;      /* 定义背景色 */
            color: #00CC66;           /* 定义前景色 */
            width: 100px;             /* 宽度 */
            height: 40px;             /* 高度 */
            line-height: 40px;        /* 行高，定义垂直居中特效 */
            text-align: center;       /* 水平居中显示 */
        }

        /* 超链接的默认样式 */
        a:hover {
            height: 60px;         /* 增加高度 */
            line-height: 60px;    /* 增加行高，大于高度，这样能够靠底显示 */
            color: #0000FF;       /* 字体颜色 */
            font-weight: bold;    /* 粗体显示 */
        }
    </style>
</head>

<body>
<div id="container">
    <div id="header">
        <h1>LOGO</h1>
    </div>

    <div id="nav">
        <a href="#">RSS</a>
    </div>
</div>
</body>
</html>